import {
  AfterContentInit, afterRender,
  AfterViewInit,
  Component,
  ContentChild,
  CUSTOM_ELEMENTS_SCHEMA, ElementRef,
  NO_ERRORS_SCHEMA, OnInit,
  ViewChild
} from '@angular/core';
import {CommonModule} from '@angular/common';
import {Observable, of} from 'rxjs';
import {CommentDetailsComponent} from "./comment/comment-details.component";
import {AboutComponent} from "./about/about.component";
import {HostElementComponent} from "./host-element/host-element.component";
import {ɵEmptyOutletComponent} from "@angular/router";
import {InheritanceComponent} from "./inheritance/inheritance.component";
import {ListBoxBaseComponent} from "./inheritance/list-box-base.component";
import {CustomCardComponent} from "./custom-card.component";
import {CustomToggleComponent} from "./custom-toggle.component";

@Component({
  selector: 'app-home',
  standalone: true,
  imports: [CommonModule, CommentDetailsComponent, AboutComponent, ɵEmptyOutletComponent, InheritanceComponent, ListBoxBaseComponent, CustomCardComponent, CustomToggleComponent],
  templateUrl: './home.component.html',
  styleUrl: './home.component.css',
  schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA]
})
export class HomeComponent implements OnInit, AfterViewInit, AfterContentInit {
  a: number = 1
  b: number = 3

  myObservable: Observable<string> = of('Hello, AsyncPipe!')
  username: Promise<String> = Promise.resolve("zmt111")

  users = [
    {
      id: 100,
      name: 'zmt',
    },
    {
      id: 110,
      name: 'hyy',
    },
    {
      id: 120,
      name: 'zjr',
    },
    {
      id: 130,
      name: 'zjz',
    }
  ]

  // users = []

  userType = 2

  //查询子组件
  // @ViewChild(CustomCardComponent) customCard: CustomCardComponent | undefined

  //通过设置 static: true，您可以向 Angular 保证此查询的目标始终存在并且不会有条件地呈现。 这使得结果可以更早地在 ngOnInit 生命周期方法中可用。
  //
  // 静态查询结果在初始化后不会更新。
  //
  // 静态选项不适用于 @ViewChildren 和 @ContentChildren 查询。
  @ViewChild(CustomCardComponent, {static: true}) customCard: CustomCardComponent | undefined

  //@ViewChildren(CustomCardComponent) actions: QueryList<CustomCardComponent>; //查询整个子组件对象

  @ContentChild(CustomToggleComponent) toggle: CustomToggleComponent | undefined;

  @ViewChild('btn_query') saveButton: ElementRef<HTMLButtonElement> | undefined;

  constructor(elementRef: ElementRef) {
    /*会频繁调用*/
    afterRender(() => {
      console.log('>>>>>>afterRender 使用DOM API', elementRef.nativeElement.querySelector('button'))

      // elementRef.nativeElement.querySelector('input')?.focus();
    })
  }

  ngOnInit(): void {
    console.log('>>>>onInit:', this.customCard) //设置 static: true。才可以
  }

  ngAfterViewInit(): void {
    console.log('>>>>>ngAfterViewInit 后才能通过ViewChild查询子组件对象：text=', this.customCard?.text)

    /*this.actions.forEach(action => {
      console.log(action.text);
    });*/

    console.log('>>>>>>>>>>btn_query:', this.saveButton, this.saveButton?.nativeElement.textContent)
  }

  ngAfterContentInit(): void {
    console.log('>>>>>>ngAfterContentInit 访问通过ngAfterContentInit查询的对象：', this.toggle)
  }


  getComponent() {
    return this.userType === 2 ? CommentDetailsComponent : HostElementComponent;
  }
}
